<style>
#QueryRouteTable{
	margin: 4px 0px;
}
#RouteRecordTable{
	width: 100%;
}
#RouteRecordTable td{
	padding: 6px;
}
#RouteRecordTable tr:first-child{
	background: rgba(80, 80, 80, 0.5);
}
#RouteRecordTable tr:first-child td{
	font-size: 0.95rem;
	font-weight: bold;
}
.RouteListTd{
	width: 50px;
	color: #0A0;
	cursor: pointer;
	font-size: 2rem;
	text-align: center;
	line-height: 16px;
}
.RouteNameTd{
	width: 160px;
}
.RouteHostTd{
	width: 150px;
	text-align: center;
}
.RouteEnabledTd{
	width: 100px;
	text-align: center;
}
.RouteConnTimeTd{
	width: 100px;
	text-align: center;
}
.RouteTimeTd{
	width: 160px;
	text-align: center;
}
.RouteOperTd{
	width: 180px;
	text-align: center;
}
.RouteOperTd button{
	float: none;
	margin: 2px;
	padding: 1px;
}
#UptimeLabel{
	color: #345;
	margin-top: 12px;
	margin-left: 8px;
}
#RouteIdText{
	margin-right: 8px;
}
#RouteIpText{
	margin-right: 8px;
}
#QueryRouteButton{
	margin-right: 9px;
}
.CgiListTable{
	width: 100%;
	margin-top: -2px;
}
.CgiListTable td{
	padding: 6px 10px;
}
.CgiListTable tr:nth-child(odd){
	background: rgba(100, 160, 200, 0.4);
}
.CgiListTable tr:nth-child(even){
	background: rgba(180, 180, 180, 0.4);
}
.CgiNumTd{
	width: 50px;
	text-align: center;
}
.CgiPathTd{
	width: 322px;
}
.CgiTypeTd{
	width: 100px;
	text-align: center;
}
.CgiDailyTd{
	width: 100px;
	text-align: center;
}
.CgiCostTd{
	width: 160px;
	text-align: center;
}
</style>

<div id='RouteRecordDiv'>
	<table id='QueryRouteTable'>
		<tr>
			<td>
				<v-text id='RouteIdText' title='服务名称'></v-text>
				<v-text id='RouteIpText' title='服务地址'></v-text>
				<v-button id='QueryRouteButton' title='查询'></v-button>
				<v-button id='AddRouteButton' title='添加路由'></v-button>
			</td>
		</tr>
	</table>
	<table id='RouteRecordTable'></table>
	<div id='UptimeLabel'></div>
</div>

<script>
var curname = null;

getVue('RouteRecordDiv');

$('#RouteIdText').keyup(function(){
	$(this).val($(this).val().toLowerCase());
	loadRouteRecord();
});

$('#RouteIpText').keyup(function(){
	loadRouteRecord();
});

$('#QueryRouteButton').click(function(){
	loadRouteRecord(true);
});

$('#AddRouteButton').click(function(){
	showConfirmMessage("<table class='DialogTable'>"
		+ "<tr><td><v-select id='RouteEnabledSelect' title='服务权重' option=' 0|1|2|3|4|5|6|7|8|9'></v-select></td></tr>"
		+ "<tr><td><v-text id='RouteNameText' title='服务名称' maxlength='64' size='14'></v-text></td></tr>"
		+ "<tr><td><v-text id='RouteHostText' title='服务地址' maxlength='32' size='14'></v-text></td></tr>"
		+ "<tr><td><v-text id='RoutePortText' title='监听端口' maxlength='5' size='14'></v-text></td></tr>"
		+ "<tr><td><v-textarea id='RouteRemarkText' title='服务说明' maxlength='256'></v-textarea></td></tr>"
		+ "</table>", '添加路由', function(flag){
		if (flag == 0) return true;
	
		if (checkRouteInfo('A')){
			var name = $('#RouteNameText').val();
			var host = $('#RouteHostText').val();
			var port = $('#RoutePortText').val();
			var remark = $('#RouteRemarkText').val();
			var enabled = $('#RouteEnabledSelect').val();

			getHttpResult('/EditRoute', {flag: 'A', name: name, host: host, port: port, remark: remark, enabled: enabled}, function(data){
				if (data.code ==  XG_TIMEOUT){
					sessionTimeout();
				}
				else if (data.code < 0){
					showToast('添加路由失败');
				}
				else{
					showToast('添加路由成功');
					loadRouteRecord();
				}
			});
			
			return true;
		}

		return false;
	});
	
	$('#RoutePortText').keyup(function(){
		this.value = this.value.replace(/[^\0-9]/g, '');
	}).change(function(){
		this.value = this.value.replace(/[^\0-9]/g, '');
	});
});

function checkHost(host){
    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
    return reg.test(host);
}

function checkRouteInfo(flag){
	var host = $('#RouteHostText').val();
	var port = $('#RoutePortText').val();

	if (flag == 'A'){
		var name = $('#RouteNameText').val();

		if (strlen(name) == 0){
			$('#RouteNameText').focus();
			return false;
		}
	}

	if (strlen(host) == 0){
		$('#RouteHostText').focus();
		return false;
	}

	if (!checkHost(host)){
		$('#RouteHostText').val('').focus();
		return false;
	}

	if (strlen(port) == 0){
		$('#RoutePortText').focus();
		return false;
	}

	return true;
}

function updateRouteData(item){
	if (item.enabled == 0 || item.proctime.length == 0){
		item.proctime = "<font color='#BBBB00'>等待检测</font>";
	}
	else{
		if (item.proctime == 0){
			item.proctime = "<font color='#EE0000'>连接异常</font>";
		}
		else if (item.proctime > 100000){
			item.proctime = "<font color='#BBBB00'>" + item.proctime + "</font>";
		}
		else{
			item.proctime = "<font color='#009900'>" + item.proctime + "</font>";
		}
	}


	$('#RouteRecordTable tr').each(function(){
		if (this.id.indexOf(item.id) >= 0){
			$(this).children('.RouteTimeTd').html(item.statetime);
			$(this).children('.RouteEnabledTd').html(item.enabled);
			$(this).children('.RouteConnTimeTd').html(item.proctime);
		}
	});
}

function addRouteRecord(bh, item){
	if (item == null){
		curname = null;

		$('#RouteRecordTable').html("<tr>"
			+ "<td class='RouteListTd'></td>"
			+ "<td class='RouteNameTd'>服务名称</td>"
			+ "<td class='RouteHostTd'>服务地址</td>"
			+ "<td class='RouteEnabledTd'>服务权重</td>"
			+ "<td class='RouteConnTimeTd'>连接用时(微秒)</td>"
			+ "<td class='RouteTimeTd'>更新时间</td>"
			+ "<td class='RouteRemarkTd'>服务说明</td>"
			+ "<td class='RouteOperTd'>操作</td>"
			+ "</tr>");
	}
	else{
		if (item.enabled == 0 || item.proctime.length == 0){
			item.proctime = "<font color='#BBBB00'>等待检测</font>";
		}
		else{
			if (item.proctime == 0){
				item.proctime = "<font color='#EE0000'>连接异常</font>";
			}
			else if (item.proctime > 100000){
				item.proctime = "<font color='#BBBB00'>" + item.proctime + "</font>";
			}
			else{
				item.proctime = "<font color='#009900'>" + item.proctime + "</font>";
			}
		}

		function getLink(host, port){
			var link = '/singlepage?title=系统资源&path=/app/workspace/pub/systeminfo.htm&host=' + host + '&port=' + port;
			return "<a class='TextLink' href='" + link + "' target='_blank'>" + host + ':' + port + "</a>";
		}

		function updateModule(host, port){
			var link = '/singlepage?title=应用管理&path=/app/workspace/pub/modulelist.htm&host=' + host + '&port=' + port;
			window.open(link);
		}

		$('#RouteRecordTable').append("<tr id='Route" + item.id + "'>"
			+ "<td class='RouteListTd'>+</td>"
			+ "<td class='RouteNameTd'>" + item.name + "</td>"
			+ "<td class='RouteHostTd' title='点击查看资源使用情况'>" + getLink(item.host, item.port) + "</td>"
			+ "<td class='RouteEnabledTd'>" + item.enabled + "</td>"
			+ "<td class='RouteConnTimeTd'>" + item.proctime + "</td>"
			+ "<td class='RouteTimeTd'>" + item.statetime + "</td>"
			+ "<td class='RouteRemarkTd'>" + item.remark + "</td>"
			+ "<td class='RouteOperTd'><button class='TextButton'>编辑</button><button class='TextButton'>复制</button><button class='TextButton'>删除</button><button class='TextButton'>应用管理</button></td>"
			+ "</tr>");

		var row = $('#RouteRecordTable tr:last');
		var list = $('#RouteRecordTable .RouteListTd:last');
		var button = $('#RouteRecordTable .RouteOperTd:last').children('button');

		if (curname == item.name){
			row.children('.RouteNameTd').css('border', '0px solid #FFFFFF');
		}
		else{
			row.children('td').css('border-top', '1px solid #8899AA');
			curname = item.name;
		}

		button.first().click(function(){
			showConfirmMessage("<table class='DialogTable'>"
				+ "<tr><td><v-select id='RouteEnabledSelect' title='服务权重' option='0|1|2|3|4|5|6|7|8|9'></v-select></td></tr>"
				+ "<tr><td><v-text id='RouteHostText' title='服务地址' maxlength='32' size='14'></v-text></td></tr>"
				+ "<tr><td><v-text id='RoutePortText' title='监听端口' maxlength='5' size='14'></v-text></td></tr>"
				+ "<tr><td><v-textarea id='RouteRemarkText' title='服务说明' maxlength='256'></v-textarea></td></tr>"
				+ "</table>", '编辑路由', function(flag){
				if (flag == 0) return true;

				if (checkRouteInfo('U')){
					var host = $('#RouteHostText').val();
					var port = $('#RoutePortText').val();
					var remark = $('#RouteRemarkText').val();
					var enabled = $('#RouteEnabledSelect').val();

					getHttpResult('/EditRoute', {flag: 'U', id: item.id, host: host, port: port, remark: remark, enabled: enabled}, function(data){
						if (data.code ==  XG_TIMEOUT){
							sessionTimeout();
						}
						else if (data.code < 0){
							showToast('更新路由失败');
						}
						else{
							showToast('更新路由成功');

							row.children('.RouteHostTd').html(getLink(host, port));
							row.children('.RouteTimeTd').html(data.statetime);
							row.children('.RouteRemarkTd').html(remark);
							row.children('.RouteEnabledTd').html(enabled);

							if (host != item.host || port != item.port){
								row.children('.RouteConnTimeTd').html("<font color='#BBBB00'>等待检测</font>");
							}

							item.host = host;
							item.port = port;
							item.remark = remark;
							item.enabled = enabled;
						}
					});
					
					return true;
				}

				return false;
			});
			
			$('#RouteHostText').val(item.host);
			$('#RoutePortText').val(item.port);
			$('#RouteRemarkText').val(item.remark);
			$('#RouteEnabledSelect').val(item.enabled);
			
			$('#RoutePortText').keyup(function(){
				this.value = this.value.replace(/[^\0-9]/g, '');
			}).change(function(){
				this.value = this.value.replace(/[^\0-9]/g, '');
			});
		}).next().click(function(){
			showConfirmMessage("<table class='DialogTable'>"
				+ "<tr><td><v-select id='RouteEnabledSelect' title='服务权重' option=' 0|1|2|3|4|5|6|7|8|9'></v-select></td></tr>"
				+ "<tr><td><v-text id='RouteHostText' title='服务地址' maxlength='32' size='14'></v-text></td></tr>"
				+ "<tr><td><v-text id='RoutePortText' title='监听端口' maxlength='5' size='14'></v-text></td></tr>"
				+ "<tr><td><v-textarea id='RouteRemarkText' title='服务说明' maxlength='256'></v-textarea></td></tr>"
				+ "</table>", '复制路由', function(flag){
				if (flag == 0) return true;

				if (checkRouteInfo('C')){
					var host = $('#RouteHostText').val();
					var port = $('#RoutePortText').val();
					var remark = $('#RouteRemarkText').val();
					var enabled = $('#RouteEnabledSelect').val();

					getHttpResult('/EditRoute', {flag: 'A', name: item.name, host: host, port: port, remark: remark, enabled: enabled}, function(data){
						if (data.code ==  XG_TIMEOUT){
							sessionTimeout();
						}
						else if (data.code < 0){
							showToast('添加路由失败');
						}
						else{
							showToast('添加路由成功');
							loadRouteRecord();
						}
					});
					
					return true;
				}

				return false;
			});
			
			$('#RouteHostText').val(item.host);
			$('#RoutePortText').val(item.port);
			$('#RouteRemarkText').val(item.remark);
			$('#RouteEnabledSelect').val(item.enabled);
			
			$('#RoutePortText').keyup(function(){
				this.value = this.value.replace(/[^\0-9]/g, '');
			}).change(function(){
				this.value = this.value.replace(/[^\0-9]/g, '');
			});
		}).next().click(function(){
			showConfirmMessage('是否删除[' + item.host + ':' + item.port + ']路由？', '删除路由', function(flag){
				if (flag == 0) return true;

				getHttpResult('/EditRoute', {flag: 'D', id: item.id}, function(data){
					if (data.code ==  XG_TIMEOUT){
						sessionTimeout();
					}
					else if (data.code < 0){
						showToast('删除路由失败');
					}
					else{
						showToast('删除路由成功');
						loadRouteRecord();
					}
				});
			});
		}).next().click(function(){
			updateModule(item.host, item.port);
		});
		
		$('#RouteRecordTable').append("<tr><td colspan='8' style='padding:0px'><table class='CgiListTable'></table></td></tr>");

		var port = item.port;
		var host = item.host;
		var tr = $('#RouteRecordTable tr:last');
		var tab = $('#RouteRecordTable table:last');

		function addCgiItem(bh, item){
			if (bh == null){
				tab.html("<tr style='background:#66B'>"
					+ "<td class='CgiNumTd'>序号</td>"
					+ "<td class='CgiPathTd'>应用路径</td>"
					+ "<td class='CgiTypeTd'>访问权限</td>"
					+ "<td class='CgiDailyTd'>今日统计</td>"
					+ "<td class='CgiCostTd'>耗时(微秒)</td>"
					+ "<td class='CgiRemarkTd'>接口说明</td>"
					+ "</tr>");
			}
			else if (item == null){
				tab.append("<tr><td class='CgiNumTd'>1</td><td><red>没有开放接口信息</red></td></tr>");
			}
			else{
				var type = '未知';
				var color = '#AAA';
				var typelist = ['无效', '私有', '内部', '公开'];

				if (item.enabled >= 0 && item.enabled < typelist.length) type = typelist[item.enabled];

				var path = item.path;
				var link = '/cgidoc?path=' + path +'&host=' + host + '&port=' + port;

				link = "<a class='TextLink' target='_blank' title='点击查看接口文档' href='" + link + "'>" + path + "</a>";

				tab.append("<tr>"
					+ "<td class='CgiNumTd'>"+ bh + "</td>"
					+ "<td class='CgiPathTd'>"+ link + "</td>"
					+ "<td class='CgiTypeTd'>"+ type + "</td>"
					+ "<td class='CgiDailyTd'>"+ (item.daily > 0 ? item.daily : '') + "</td>"
					+ "<td class='CgiCostTd'>"+ (item.meancost > 0 ? item.meancost : '') + "</td>"
					+ "<td class='CgiRemarkTd'>" + item.remark + "</td>"
					+ "</tr>");

				if (item.enabled == 1) color = '#090';
				if (item.enabled == 2) color = '#00E';
				if (item.enabled == 3) color = '#E00';

				tab.find('.CgiTypeTd:last').css('color', color);

				if (item.meancost > 1000000) color = '#E00';
				else if (item.meancost > 100000) color = '#606';
				else if (item.meancost > 50000) color = '#00B';
				else color = '#090';

				tab.find('.CgiCostTd:last').css('color', color);
			}
		}

		list.click(function(){
			if (list.html() == '+'){
				getHttpResult('/GetRouteContent', {id: item.id}, function(data){
					addCgiItem();

					if (data.code > 0){
						var num = 0;

						$.each(data.list, function(idx, item){
							if (item.flag > 0 && item.path != 'execmodule' && item.path != 'createtoken') addCgiItem(++num, item);
						});

						if (num == 0) addCgiItem(1);
					}
					else{
						tab.append("<tr><td colspan='7'>没有记录</td></tr>");
					}
				});

				list.html('-');
				tr.show();
			}
			else{
				list.html('+');
				tab.html('');
				tr.hide();
			}
		});

		tr.hide();
   }
}

function updateRouteRecord(){
	var name = $('#RouteIdText').val();
	var host = $('#RouteIpText').val();

	getHttpResult('/GetRouteList', {flag: 'A', name: name, host: host}, function(data){
		if (data.code > 0){
			$.each(data.list, function(idx, item){
				updateRouteData(item);
			});
				
			$('#RouteRecordTable').css('border-bottom', '1px solid #8899AA');

			$('#UptimeLabel').text('更新时间：' + data.datetime);
		}
	});
}

function loadRouteRecord(flag){
	var name = $('#RouteIdText').val();
	var host = $('#RouteIpText').val();

	if (flag) showToastMessage('正在加载数据...');

	getHttpResult('/GetRouteList', {flag: 'A', name: name, host: host}, function(data){
		if (flag) hideToastBox();

		if (data.code == XG_TIMEOUT){
			sessionTimeout();
		}
		else if (data.code < 0){
			if (flag) showToast('加载数据失败');
		}
		else{
			addRouteRecord();

			if (data.code == 0){
				if (flag) showToast('没有满足条件的记录');
			}
			else{
				$.each(data.list, function(idx, item){
					addRouteRecord(idx + 1, item);
				});
				
				$('#RouteRecordTable').css('border-bottom', '1px solid #8899AA');
			}
			
			$('#UptimeLabel').text('更新时间：' + data.datetime);
		}
	}, flag);
}

loadRouteRecord(true);

setSingletonInterval('routelist_timer', 3000, updateRouteRecord);
</script>